<template>
	<view>
		<nav-bar fontColor="#FFFFFF" title="融资申请详情"></nav-bar>
		<uni-card :is-shadow="true" :title="'采易融-'+form.productName+'-订单详情'">
			<view class="content-margin">融资编号：<span style="color: #3B5DE0;">{{form.id}}</span></view>
			<view class="content-margin">融资用户：<span style="color: #3B5DE0;">{{form.receiverName}}</span></view>
			<view class="content-margin">融资时间：<span style="color: #3B5DE0;">{{form.createTime}}</span></view>
		</uni-card>

		<!-- sub-title="酒新贷" -->
		<uni-card :is-shadow="true" title="融资需求" :extra="'采易融-'+form.productName+'-订单详情'">
			<view class="content-margin">订单号：<span style="color: #3B5DE0;">{{form.salesOrderNo}}</span></view>
			<view class="content-margin">融资金额：<span style="color: #3B5DE0;">{{form.askFinAmount}}元</span></view>
			<view class="content-margin" v-if="form.status == 'paid'">放款金额：<span style="color: #3B5DE0;">{{form.amount}}元</span></view>
			<view class="content-margin">借款用途：<span style="color: #3B5DE0;">购买酒水</span></view>
		</uni-card>
		<uni-card :is-shadow="true" mode="card">
			<image src="../../static/icon/clock.png" class="img"></image>
			<view class="top-title">
				{{form.status == 'created' ? '待支付服务费' : (form.status == 'fee_paid' ? '正在融资' : (form.status == 'un_submit' ? '正在融资' : (form.status == 'submitted' ? '正在融资' : (form.status == 'paid' ? '已放款' : (form.status == 'rejected' ? '放款失败' : '未知状态')))))}}
			</view>
		</uni-card>
		<view style="height: 120rpx;" v-if="form.status == 'fee_paid' || form.status == 'un_submit' || form.status == 'submitted'">
			<view class="bottomBox">
				<view class="buttonBox" @tap="jump">
					<button class="button_fix" size="default">下一步</button>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;" v-else-if="form.status == 'created'">
			<view class="bottomBox">
				<view class="buttonBox" @tap="submit">
					<button class="button_fix" size="default">去支付</button>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;" v-else>
			
		</view>
		<!-- <uni-card>
			<uni-collapse>
				<uni-collapse-item title="还款计划" :show-animation="true">
					<zb-table :columns="column0" :stripe="true" :fit="true" @edit="choosen"
						:data="dataList0"></zb-table>
				</uni-collapse-item>
			</uni-collapse>
		</uni-card> -->
		<!-- <uni-card>
			<uni-collapse>
				<uni-collapse-item title="还款试算 | 日利率0.014%（年化利率5.05%）" :show-animation="true">
					<view style="color: #a2a2a2;font-size: 25rpx;">资方费用 | 日利率0.014%（年化利率5.00%）</view>
					<view style="color: #a2a2a2;font-size: 25rpx;margin: 10rpx 0;">计费方式：等额本息</view>
					<zb-table :columns="column1" :stripe="true" :fit="true" show-summary sum-text="总计"
						:data="dataList1"></zb-table>

					<view style="color: #797979;font-size: 25rpx;margin: 20rpx 0;font-weight: bold;">平台费用</view>
					<zb-table :columns="column2" :stripe="true" :fit="true" show-summary sum-text="总价"
						:data="dataList2"></zb-table>
					<view style="color: #a2a2a2;font-size: 25rpx;margin: 20rpx 0">以上仅为试算结果，以实际放款为准～</view>
					<view style="color: #040404;font-size: 30rpx;margin: 20rpx 0;font-weight: bold;">应还总额：￥10.09</view>
				</uni-collapse-item>
			</uni-collapse>
		</uni-card> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				column0: [{
						type: 'index',
						label: '#',
						align: 'center'
					},
					{
						name: 'repayAmount',
						label: '还款金额',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'repayForm',
						label: '还款类型',
						filters: {
							'USER_REPAY': '用户主动还款',
							'PRE_SETTLE': '提前还款',
							'REFUND_REPAY': '退款还款',
							'DEDUCT_REPAY': '自动代扣还款'
						},
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'operation',
						type: 'operation',
						label: '操作',
						align: 'center',
						renders: [{
							name: '还款',
							// type: 'warn', // type 为custom的时候自定义按钮
							func: "edit"
						}]
					},
				],
				dataList0: [],
				column1: [{
						type: 'index',
						label: '期数',
						align: 'center'
					},
					{
						name: 'backDate',
						label: '还款日期',

						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'total',
						label: '应还总额',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'benjin',
						label: '还款本金',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'lixi',
						label: '应还利息',
						emptyString: '暂无数据',
						align: 'center'
					}
				],
				dataList1: [{
						backDate: '2023-08-03',
						total: '3.36',
						benjin: '3.32',
						lixi: '0.04',
					},
					{
						backDate: '2023-08-03',
						total: '3.36',
						benjin: '3.32',
						lixi: '0.04',
					},
					{
						backDate: '2023-08-03',
						total: '3.36',
						benjin: '3.32',
						lixi: '￥0.04',
					}
				],
				column2: [{
						name: 'fymc',
						label: '费用名称',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'fylx',
						label: '费用类型',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'zfjd',
						label: '支付节点',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'jffs',
						label: '计费方式',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'yfje',
						label: '应付金额',
						emptyString: '暂无数据',
						align: 'center'
					}
				],
				dataList2: [{
					fymc: '服务费',
					fylx: '服务费',
					zfjd: '融资申请',
					jffs: '借款本金x服务费率',
					yfje: '0.01'
				}],
				id: '',

			}
		},
		onLoad(e) {
			this.id = e.id
			this.loadData();
		},
		methods: {
			jump(){
				if(this.form.productName == '酒易贷'){
					uni.navigateTo({
						url:'/pages/login/jdLogin?type=financing&salesOrderId='+this.form.salesOrderNo
					})
				}
				else{
					uni.navigateTo({
						url:'/pages/limit/qrCode'
					})
				}
			},
			choosen(e) {
				console.log(e)
				let opt = {
					url: 'finance/customerRepayOrder/payBack',
					method: 'GET'
				};
				let params = {
					repayAmount: e.repayAmount,
					id: e.id
				};
				this.$http.httpTokenRequest(opt, params).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.msg,
							icon: 'success',
							position: 'center'
						});
						this.loadData();
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'error',
							position: 'center'
						});
					}
				})

			},
			loadData() {
				let opt = {
					url: 'baoli/finCreditBill/' + this.id,
					method: 'GET'
				};
				this.$http.httpTokenRequest(opt, {}).then(res => {
					this.form = res.data.data
					// this.loadRepayOrder();
				})
			},
			loadRepayOrder() {
				let opt = {
					url: 'finance/customerRepayOrder/search',
					method: 'POST'
				};
				let params = {
					jdPayOrderId: this.form.creditBillNo
					// jdPayOrderId: '220906000001'
				};
				this.$http.httpTokenRequest(opt, params).then(res => {
					if (res.data.data != '') {
						this.dataList0 = res.data.data
					}
				})
			},
			
			submit() {
				if (this.form.salesOrderNo != '') {
					const self = this;
					// 微信支付
					let ua = navigator.userAgent.toLowerCase();
					console.log(ua)
					//判断当前是否为微信浏览器
					if (ua.match(/MicroMessenger/i) == "micromessenger") {
						// 是微信浏览器
						// 使用微信支付
						let opt = {
							url: 'yeepay/prePay/wxGzh/' + this.form.salesOrderNo + '/' + uni.getStorageSync(
								'WXUserToken').openid,
							method: 'POST'
						};
						// uni.setStorageSync('baseFormData',this.baseFormData)
						this.$http.httpTokenRequest(opt, {}).then(res => {
							if (res.data.code == 200) {
								let response = JSON.parse(res.data.data)
								// this.financingApply();
								console.log(response.appId)
								this.$wx.config({ //全局参数配置
									debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
									appId: response.appId, // 必填，公众号的唯一标识
									timestamp: response.timeStamp, // 必填，生成签名的时间戳
									nonceStr: response.nonceStr, // 必填，生成签名的随机串
									signature: response.paySign, // 必填，签名，见附录1
									jsApiList: ['chooseWXPay'] // 必填
								});
								this.$wx.ready(function() { //预请求，看能否发起微信支付
									self.$wx.checkJsApi({ //判断当前版本是否支持指定js接口
										jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表
										success: function(res) {
											console.log('成功信息1');
											console.log(res);
										},
										fail: function(res) {
											console.log('失败信息1');
											console.log(res);
										}
									});
			
									self.$wx.chooseWXPay({ //发起一个微信的支付请求
										timestamp: response.timeStamp, // 支付签名时间戳
										nonceStr: response.nonceStr, // 支付签名随机串，不长于 32 位
										package: response
										.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
										signType: response
										.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
										paySign: response.paySign, // 支付签名,与签名是一个东西
										success: async function(res) {
											await console.log(res, "成功信息2");
											uni.showToast({
												title: '支付成功'
											})
			
										},
										cancel: function(res) {
											// uni.removeStorageSync('baseFormData')
											uni.showToast({
												icon:'none',
												title: '支付取消'
											})
										},
										fail: function(res) {
											// uni.removeStorageSync('baseFormData')
											console.log(res)
											uni.showToast({
												icon:'error',
												title: '支付失败'
											})
										}
									});
								});
								this.$wx.error(function(res) {
									console.log(res, "失败信息3");
								});
							} else {
								uni.showToast({
									icon:'error',
									title: res.data.msg
								})
							}
						})
					} else {
						console.log('不是微信浏览器')
					}
				} else {
					
				}
			}
		}
	}
</script>

<style>
	.img {
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto;
	}

	.top-title {
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		margin-top: 10rpx;
	}

	.content-margin {
		margin: 20rpx 0;
	}
	.bottomBox {
		position: fixed;
		width: 100%;
		bottom: 20rpx;
		/* margin-bottom: 20rpx; */
		/* z-index: 1000; */
	}
	
	.buttonBox {
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
	
		// margin-top: 200rpx;
	}
	
	.button_fix {
		width: 90%;
		height: 70rpx;
		// margin: 0 auto;
		color: #FFFFFF;
		background: #2749C8;
		font-weight: bold;
		letter-spacing: 5rpx;
		font-size: 28rpx;
		line-height: 70rpx;
	}
</style>